{{#>base title=data.page.form}}

    {{#*inline "pageContent"}}

        <div class="row">
            <div class="col-md-12">
                <h3 class="page-title">
                    {{data.page.form}}
                </h3>

                {{>fixtures/tabs-form form=true}}

            </div>
        </div>

        <div class="row">
            <div class="col-md-6 ">
                <!-- BEGIN SAMPLE FORM PORTLET-->
                <div class="portlet box default ">
                    <div class="portlet-title">
                        <div class="caption">
                            Default Form
                        </div>
                        <div class="tools">
                            <a href="" class="collapse"></a>


                            <a href="" class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <form role="form">
                            <div class="form-body">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Text</label>
                                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter text">
                                                <span class="help-block">
                                                    A block of help text.
                                                </span>
                                </div>
                                <div class="form-group">
                                    <label>Email Address</label>
                                    <div class="input-group">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-envelope"></i>
                                                    </span>
                                        <input type="text" class="form-control" placeholder="Email Address">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">Password</label>
                                    <div class="input-group">
                                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-user"></i>
                                                    </span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Left Icon</label>
                                    <div class="input-icon">
                                        <i class="fa fa-bell-o"></i>
                                        <input type="text" class="form-control" placeholder="Left icon">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Right Icon</label>
                                    <div class="input-icon right">
                                        <i class="fa fa-microphone"></i>
                                        <input type="text" class="form-control" placeholder="Right icon">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Input With Spinner</label>
                                    <input class="form-control spinner" type="text" placeholder="Process something"/>
                                </div>
                                <div class="form-group">
                                    <label>Static Control</label>
                                    <p class="form-control-static">
                                        email@example.com
                                    </p>
                                </div>
                                <div class="form-group">
                                    <label>Disabled</label>
                                    <input type="text" class="form-control" placeholder="Disabled" disabled>
                                </div>
                                <div class="form-group">
                                    <label>Readonly</label>
                                    <input type="text" class="form-control" placeholder="Readonly" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Dropdown</label>
                                    <select class="form-control">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                        <option>Option 5</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Multiple Select</label>
                                    <select multiple class="form-control">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                        <option>Option 5</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Textarea</label>
                                    <textarea class="form-control" rows="3"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputFile1">File input</label>
                                    <input type="file" id="exampleInputFile1">
                                    <p class="help-block">
                                        some help text here.
                                    </p>
                                </div>
                                <div class="form-group">
                                    <label class="">Checkboxes</label>
                                    <div class="checkbox-list">
                                        <label>
                                            <input type="checkbox"> Checkbox 1 </label>
                                        <label>
                                            <input type="checkbox"> Checkbox 2 </label>
                                        <label>
                                            <input type="checkbox" disabled> Disabled </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="">Inline Checkboxes</label>
                                    <div class="checkbox-list">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="inlineCheckbox1" value="option1"> Checkbox 1 </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="inlineCheckbox2" value="option2"> Checkbox 2 </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="inlineCheckbox3" value="option3" disabled> Disabled </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="">Radio</label>
                                    <div class="radio-list">
                                        <label>
                                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option 1 Option 1 </label>
                                        <label>
                                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option 2 </label>
                                        <label>
                                            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Disabled </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="">Inline Radio</label>
                                    <div class="radio-list">
                                        <label class="radio-inline">
                                            <input type="radio" name="optionsRadios" id="optionsRadios4" value="option1" checked> Option 1 </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="optionsRadios" id="optionsRadios5" value="option2"> Option 2 </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="optionsRadios" id="optionsRadios6" value="option3" disabled> Disabled </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions">
                                <button type="submit" class="btn btn-primary">Submit</button>
                                <button type="button" class="btn btn-default">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- END SAMPLE FORM PORTLET-->
                <!-- BEGIN SAMPLE FORM PORTLET-->
                <div class="portlet box default">
                    <div class="portlet-title">
                        <div class="caption">
                            Default Form Height Sizing
                        </div>
                        <div class="tools">
                            <a href="" class="collapse"></a>


                            <a href="" class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <form role="form">
                            <div class="form-body">
                                <div class="form-group">
                                    <label>Large Input</label>
                                    <input type="text" class="form-control input-lg" placeholder="input-lg">
                                </div>
                                <div class="form-group">
                                    <label>Default Input</label>
                                    <input type="text" class="form-control" placeholder="">
                                </div>
                                <div class="form-group">
                                    <label>Small Input</label>
                                    <input type="text" class="form-control input-sm" placeholder="input-sm">
                                </div>
                                <div class="form-group">
                                    <label>Large Select</label>
                                    <select class="form-control input-lg">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                        <option>Option 5</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Default Select</label>
                                    <select class="form-control">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                        <option>Option 5</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Small Select</label>
                                    <select class="form-control input-sm">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                        <option>Option 5</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-actions right">
                                <button type="button" class="btn btn-default">Cancel</button>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- END SAMPLE FORM PORTLET-->
                <!-- BEGIN SAMPLE FORM PORTLET-->
                <div class="portlet box default">
                    <div class="portlet-title">
                        <div class="caption">
                            Form Input Width Sizing
                        </div>
                        <div class="tools">
                            <a href="" class="collapse"></a>


                            <a href="" class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <form role="form">
                            <div class="form-body">
                                <div class="form-group">
                                    <label>Fluid Input</label>
                                    <input type="text" class="form-control" placeholder="fluid">
                                    <div class="input-icon right margin-top-10">
                                        <i class="fa fa-check"></i>
                                        <input type="text" class="form-control" placeholder="fluid">
                                    </div>
                                    <div class="input-icon margin-top-10">
                                        <i class="fa fa-user"></i>
                                        <input type="text" class="form-control" placeholder="fluid">
                                    </div>
                                    <div class="input-group margin-top-10">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-envelope"></i>
                                                    </span>
                                        <input type="email" class="form-control" placeholder=".input-xlarge">
                                    </div>
                                    <div class="input-group margin-top-10">
                                        <input type="email" class="form-control" placeholder=".input-xlarge">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-envelope"></i>
                                                    </span>
                                    </div>
                                    <hr>
                                </div>
                                <div class="form-group">
                                    <label>Extra Large Input</label>
                                    <input type="text" class="form-control input-xlarge" placeholder=".input-xlarge">
                                    <div class="input-icon right input-xlarge margin-top-10">
                                        <i class="fa fa-check"></i>
                                        <input type="text" class="form-control" placeholder=".input-xlarge">
                                    </div>
                                    <div class="input-icon input-xlarge margin-top-10">
                                        <i class="fa fa-user"></i>
                                        <input type="text" class="form-control" placeholder=".input-xlarge">
                                    </div>
                                    <div class="input-group input-xlarge margin-top-10">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-envelope"></i>
                                                    </span>
                                        <input type="email" class="form-control" placeholder=".input-xlarge">
                                    </div>
                                    <div class="input-group input-xlarge margin-top-10">
                                        <input type="email" class="form-control" placeholder=".input-xlarge">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-envelope"></i>
                                                    </span>
                                    </div>
                                    <hr>
                                </div>
                                <div class="form-group">
                                    <label>Large Input</label>
                                    <input type="text" class="form-control input-large" placeholder=".input-large">
                                    <div class="input-icon right input-large margin-top-10">
                                        <i class="fa fa-check"></i>
                                        <input type="text" class="form-control" placeholder=".input-large">
                                    </div>
                                    <div class="input-icon input-large margin-top-10">
                                        <i class="fa fa-user"></i>
                                        <input type="text" class="form-control" placeholder=".input-large">
                                    </div>
                                    <div class="input-group input-large margin-top-10">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-envelope"></i>
                                                    </span>
                                        <input type="email" class="form-control" placeholder=".input-large">
                                    </div>
                                    <div class="input-group input-large margin-top-10">
                                        <input type="email" class="form-control" placeholder=".input-large">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-envelope"></i>
                                                    </span>
                                    </div>
                                    <hr>
                                </div>
                                <div class="form-group">
                                    <label>Medium Input</label>
                                    <input type="text" class="form-control input-medium" placeholder=".input-medium">
                                    <div class="input-icon right input-medium margin-top-10">
                                        <i class="fa fa-check"></i>
                                        <input type="text" class="form-control" placeholder=".input-medium">
                                    </div>
                                    <div class="input-icon input-medium margin-top-10">
                                        <i class="fa fa-user"></i>
                                        <input type="text" class="form-control" placeholder=".input-medium">
                                    </div>
                                    <div class="input-group input-medium margin-top-10">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-envelope"></i>
                                                    </span>
                                        <input type="email" class="form-control" placeholder=".input-medium">
                                    </div>
                                    <div class="input-group input-medium margin-top-10">
                                        <input type="email" class="form-control" placeholder=".input-medium">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-envelope"></i>
                                                    </span>
                                    </div>
                                    <hr>
                                </div>
                                <div class="form-group">
                                    <label>Small Input</label>
                                    <input type="text" class="form-control input-small" placeholder=".input-small">
                                    <div class="input-icon right input-small margin-top-10">
                                        <i class="fa fa-check"></i>
                                        <input type="text" class="form-control" placeholder=".input-small">
                                    </div>
                                    <div class="input-icon input-small margin-top-10">
                                        <i class="fa fa-user"></i>
                                        <input type="text" class="form-control" placeholder=".input-small">
                                    </div>
                                    <div class="input-group input-small margin-top-10">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-envelope"></i>
                                                    </span>
                                        <input type="email" class="form-control" placeholder=".input-small">
                                    </div>
                                    <div class="input-group input-small margin-top-10">
                                        <input type="email" class="form-control" placeholder=".input-small">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-envelope"></i>
                                                    </span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Extra Small Input</label>
                                    <input type="text" class="form-control input-xsmall" placeholder=".input-xsmall">
                                </div>
                                <div class="form-group">
                                    <label>Extra Large Select</label>
                                    <select class="form-control input-xlarge">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                        <option>Option 5</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Large Select</label>
                                    <select class="form-control input-large">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                        <option>Option 5</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Medium Select</label>
                                    <select class="form-control input-medium">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                        <option>Option 5</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Small Select</label>
                                    <select class="form-control input-small">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                        <option>Option 5</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Extra Small Select</label>
                                    <select class="form-control input-xsmall">
                                        <option>Option 1</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                        <option>Option 4</option>
                                        <option>Option 5</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-actions right">
                                <button type="button" class="btn btn-default">Cancel</button>
                                <button type="submit" class="btn green">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- END SAMPLE FORM PORTLET-->
            </div>
            <div class="col-md-6 ">
                <!-- BEGIN SAMPLE FORM PORTLET-->
                <div class="portlet box default ">
                    <div class="portlet-title">
                        <div class="caption">
                            Horizontal Form
                        </div>
                        <div class="tools">
                            <a href="" class="collapse"></a>


                            <a href="" class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <form class="form-horizontal" role="form">
                            <div class="form-body">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Text</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" placeholder="Enter text">
                                                    <span class="help-block">
                                                        A block of help text.
                                                    </span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Email Address</label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                                        <span class="input-group-addon">
                                                            <i class="fa fa-envelope"></i>
                                                        </span>
                                            <input type="email" class="form-control" placeholder="Email Address">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Password</label>
                                    <div class="col-md-9">
                                        <div class="input-group">
                                            <input type="password" class="form-control" placeholder="Password">
                                                        <span class="input-group-addon">
                                                            <i class="fa fa-user"></i>
                                                        </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Left Icon</label>
                                    <div class="col-md-9">
                                        <div class="input-icon">
                                            <i class="fa fa-bell-o"></i>
                                            <input type="text" class="form-control" placeholder="Left icon">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Right Icon</label>
                                    <div class="col-md-9">
                                        <div class="input-icon right">
                                            <i class="fa fa-microphone"></i>
                                            <input type="text" class="form-control" placeholder="Right icon">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Input With Spinner</label>
                                    <div class="col-md-9">
                                        <input type="password" class="form-control spinner" placeholder="Password">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Static Control</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static">
                                            email@example.com
                                        </p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Disabled</label>
                                    <div class="col-md-9">
                                        <input type="password" class="form-control" placeholder="Disabled" disabled>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Readonly</label>
                                    <div class="col-md-9">
                                        <input type="password" class="form-control" placeholder="Readonly" readonly>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Dropdown</label>
                                    <div class="col-md-9">
                                        <select class="form-control">
                                            <option>Option 1</option>
                                            <option>Option 2</option>
                                            <option>Option 3</option>
                                            <option>Option 4</option>
                                            <option>Option 5</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Multiple Select</label>
                                    <div class="col-md-9">
                                        <select multiple class="form-control">
                                            <option>Option 1</option>
                                            <option>Option 2</option>
                                            <option>Option 3</option>
                                            <option>Option 4</option>
                                            <option>Option 5</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Textarea</label>
                                    <div class="col-md-9">
                                        <textarea class="form-control" rows="3"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputFile" class="col-md-3 control-label">File input</label>
                                    <div class="col-md-9">
                                        <input type="file" id="exampleInputFile">
                                        <p class="help-block">
                                            some help text here.
                                        </p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Checkboxes</label>
                                    <div class="col-md-9">
                                        <div class="checkbox-list">
                                            <label>
                                                <input type="checkbox"> Checkbox 1 </label>
                                            <label>
                                                <input type="checkbox"> Checkbox 1 </label>
                                            <label>
                                                <input type="checkbox" disabled> Disabled </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Inline Checkboxes</label>
                                    <div class="col-md-9">
                                        <div class="checkbox-list">
                                            <label class="checkbox-inline">
                                                <input type="checkbox" id="inlineCheckbox21" value="option1"> Checkbox 1 </label>
                                            <label class="checkbox-inline">
                                                <input type="checkbox" id="inlineCheckbox22" value="option2"> Checkbox 2 </label>
                                            <label class="checkbox-inline">
                                                <input type="checkbox" id="inlineCheckbox23" value="option3" disabled> Disabled </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Radio</label>
                                    <div class="col-md-9">
                                        <div class="radio-list">
                                            <label>
                                                <input type="radio" name="optionsRadios" id="optionsRadios22" value="option1" checked> Option 1 </label>
                                            <label>
                                                <input type="radio" name="optionsRadios" id="optionsRadios23" value="option2" checked> Option 2 </label>
                                            <label>
                                                <input type="radio" name="optionsRadios" id="optionsRadios24" value="option2" disabled> Disabled </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Inline Radio</label>
                                    <div class="col-md-9">
                                        <div class="radio-list">
                                            <label class="radio-inline">
                                                <input type="radio" name="optionsRadios" id="optionsRadios25" value="option1" checked> Option 1 </label>
                                            <label class="radio-inline">
                                                <input type="radio" name="optionsRadios" id="optionsRadios26" value="option2" checked> Option 2 </label>
                                            <label class="radio-inline">
                                                <input type="radio" name="optionsRadios" id="optionsRadios27" value="option3" disabled> Disabled </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions fluid">
                                <div class="col-md-offset-3 col-md-9">
                                    <button type="submit" class="btn green">Submit</button>
                                    <button type="button" class="btn btn-default">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- END SAMPLE FORM PORTLET-->
                <!-- BEGIN SAMPLE FORM PORTLET-->
                <div class="portlet box default ">
                    <div class="portlet-title">
                        <div class="caption">
                            Horizontal Form Height Sizing
                        </div>
                        <div class="tools">
                            <a href="" class="collapse"></a>


                            <a href="" class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <form class="form-horizontal" role="form">
                            <div class="form-body">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Large Input</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control input-lg" placeholder="Large Input">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Default Input</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" placeholder="Default Input">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Small Input</label>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control input-sm" placeholder="Small Input">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Large Select</label>
                                    <div class="col-md-9">
                                        <select class="form-control input-lg">
                                            <option>Option 1</option>
                                            <option>Option 2</option>
                                            <option>Option 3</option>
                                            <option>Option 4</option>
                                            <option>Option 5</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Default Select</label>
                                    <div class="col-md-9">
                                        <select class="form-control">
                                            <option>Option 1</option>
                                            <option>Option 2</option>
                                            <option>Option 3</option>
                                            <option>Option 4</option>
                                            <option>Option 5</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">Small Select</label>
                                    <div class="col-md-9">
                                        <select class="form-control input-sm">
                                            <option>Option 1</option>
                                            <option>Option 2</option>
                                            <option>Option 3</option>
                                            <option>Option 4</option>
                                            <option>Option 5</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions right">
                                <button type="button" class="btn btn-default">Cancel</button>
                                <button type="submit" class="btn green">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- END SAMPLE FORM PORTLET-->




                <div class="portlet box default ">
                    <div class="portlet-title">
                        <div class="caption">
                            Validation States
                        </div>
                        <div class="tools">
                            <a href="" class="collapse"></a>


                            <a href="" class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <form role="form">
                            <div class="form-body">
                                <div class="form-group has-success">
                                    <label class="control-label" for="inputSuccess">Input with success</label>
                                    <input type="text" class="form-control" id="inputSuccess">
                                </div>
                                <div class="form-group has-warning">
                                    <label class="control-label" for="inputWarning">Input with warning</label>
                                    <input type="text" class="form-control" id="inputWarning">
                                </div>
                                <div class="form-group has-error">
                                    <label class="control-label" for="inputError">Input with error</label>
                                    <input type="text" class="form-control" id="inputError">
                                </div>
                            </div>
                            <div class="form-actions">
                                <button type="button" class="btn btn-default">Cancel</button>
                                <button type="submit" class="btn red">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="portlet box default ">
                    <div class="portlet-title">
                        <div class="caption">
                            Validation States With Icons
                        </div>
                        <div class="tools">
                            <a href="" class="collapse"></a>


                            <a href="" class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <form role="form">
                            <div class="form-body">
                                <div class="form-group">
                                    <label class="control-label" for="inputSuccess">Default input</label>
                                    <div class="input-icon right">
                                        <i class="fa fa-info-circle tooltips" data-original-title="Email address" data-container="body"></i>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group has-success">
                                    <label class="control-label" for="inputSuccess">Input with success</label>
                                    <div class="input-icon right">
                                        <i class="fa fa-check tooltips" data-original-title="You look OK!" data-container="body"></i>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group has-warning">
                                    <label class="control-label" for="inputWarning">Input with warning</label>
                                    <div class="input-icon right">
                                        <i class="fa fa-warning tooltips" data-original-title="please provide an email" data-container="body"></i>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group has-error">
                                    <label class="control-label" for="inputError">Input with error</label>
                                    <div class="input-icon right">
                                        <i class="fa fa-exclamation tooltips" data-original-title="please write a valid email" data-container="body"></i>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions right">
                                <button type="button" class="btn btn-default">Cancel</button>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="portlet box default">
                    <div class="portlet-title">
                        <div class="caption">
                            Horizontal Form Validation States
                        </div>
                        <div class="tools">
                            <a href="" class="collapse"></a>


                            <a href="" class="remove"></a>
                        </div>
                    </div>
                    <div class="portlet-body form">
                        <form role="form" class="form-horizontal">
                            <div class="form-body">
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="inputSuccess">Default input</label>
                                    <div class="col-md-8">
                                        <div class="input-icon right">
                                            <i class="fa fa-info-circle tooltips" data-original-title="Email address" data-container="body"></i>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group has-success">
                                    <label class="col-md-4 control-label" for="inputSuccess">Input with success</label>
                                    <div class="col-md-8">
                                        <div class="input-icon right">
                                            <i class="fa fa-check tooltips" data-original-title="You look OK!" data-container="body"></i>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group has-warning">
                                    <label class="col-md-4 control-label" for="inputWarning">Input with warning</label>
                                    <div class="col-md-8">
                                        <div class="input-icon right">
                                            <i class="fa fa-warning tooltips" data-original-title="please provide an email" data-container="body"></i>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group has-error">
                                    <label class="col-md-4 control-label" for="inputError">Input with error</label>
                                    <div class="col-md-8">
                                        <div class="input-icon right">
                                            <i class="fa fa-exclamation tooltips" data-original-title="please write a valid email" data-container="body"></i>
                                            <input type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-actions fluid">
                                <div class="col-md-offset-4 col-md-8">
                                    <button type="button" class="btn btn-default">Cancel</button>
                                    <button type="submit" class="btn btn-primary">Submit</button>


                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {{/inline}}

    {{#*inline "appScript"}}
        <script type="text/javascript">
            pagurian.call("modules/form/app", function(app) {
                app.page.index();
            });
        </script>
    {{/inline}}

{{/base}}
